<script setup>
import {usetv} from '@/stores/tv.js'
const storetv = usetv()


var id = 0;

 function qiehuan(){
          document.getElementById("img").src = storetv.bannerDate[id].filename;
            id++;
            if (id >= storetv.bannerDate.length) {
              id = 0;
            }
        }
  setInterval(qiehuan, 3000);
  
</script>

<template>
  <div class="contain">
    <div class="banner">
    <img id="img" class="img" alt="">
  </div>
  <div class="bottom">
    <div class="image-container">
      <img v-for="item in storetv.bannerDate" :key="item.id" :src="item.filename" alt="" class="bottom-image" @click="change(item.id)" >
    </div>
  </div>
  <div class="but">
    <div class="butcon">
      <el-button v-for="item in storetv.movieData" :key="item.id" style="width: 140px; height: 40px; border-radius: 20px; background-color: rgb(44, 44, 44); color: azure; margin-right: 10px;">
        {{ item.name }}
      </el-button>
    </div>
  </div>
  
  <div class="nav">
        <el-aside style="font-size: 20px; margin-top: 25px; width: 150px; "><span style="color: white; ">&nbsp;&nbsp;&nbsp; 重磅热播</span> </el-aside>
  </div>

  <div class="bigview">
        <div v-for="item in storetv.tvDate" :key="item.id" class="bigviewbox">
          <img :src="item.filename" alt="" class="small-image">
          <span style="font-size: 17px; color: white;">{{item.name}}</span>
        </div>
      </div>

  </div>


  <div class="top">
      <el-menu mode="horizontal" background-color="rgb(20,20,20)">
        <el-aside style="font-size: 20px; margin-top: 25px; width: 120px;"><span style="color: white; ">&nbsp;&nbsp;&nbsp;为你推荐</span> </el-aside>
      </el-menu>
      <div class="bigviews">
        <div v-for="item in storetv.tvsDate" :key="item.id" class="bigviewboxs">
          <img :src="item.filename1" alt="" class="small-images">
          <div class="image-contains">
          <div class="leftboxs">
            <img :src="item.filename2" alt="" class="left-images">
          </div>
          <div class="rightboxs">
            <span style="font-size: larger; color: white;">{{item.name1}}</span>
            <span>&nbsp;</span>
            <span style="font-size: larger; color: white;">{{item.name2}}</span>
          </div>
        </div>
         
        </div>
      </div>
  </div>

  

</template>

<style  scoped>
.contain{
  position: absolute;
  left: 210px; 
  top: 0;
  width: 1650px;
  height: 4000px;
  background-color: rgb(20,20,20);
  
}
.banner{
  position: absolute;
  top: 0;
  width: 1650px;
  height: 600px;
  z-index: 10;
 
  cursor: pointer;
}

.img{
  width: 100%;
  height: 100%;
}
.bottom{
  width: 800px;
  height: 300px;
  z-index: 11;
  margin-top: 480px;
  position: relative;
  margin-left: 950px;
}
.bottom-image{
  width: 105px;
  height: 60px;
  margin: 10px;

}
.image-container {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
 
}
.el-menu{
 
 border:0!important;

}
.but{
  margin-top: -190px;
  font-size: 40px;
  margin-left: 30px;
}

.bigview{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* 图片排序不够换行 */
  width: 1600px;
  z-index: 10px;
  float: left;
}
.bigviewbox{
  margin-top: 2px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  height: 250px;
  cursor: pointer;
  transition: filter 0.3s;
}
.bigviewbox:hover span {
  color: #ff9900; 
}
.small-image {
  width: 300px;
  height: 150px; 
  border-radius: 15px;
}


.top{
 position: absolute;
  top: 1200px;
  left: 210px; 
  width: 1600px;
  background-color: rgb(20,20,20);
  height: 150px;
  z-index: 10;
  height: 1100px;
}

.el-menu{
 
 border:0!important;

}
.bigviews{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* 图片排序不够换行 */
  width: 1600px;
  height: 1600px;
  z-index: 10px;
  float: left;
  background-color: rgb(20,20,20);
}
.bigviewboxs{
  margin-top: 2px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  height: 550px;
  cursor: pointer;
  transition: filter 0.3s;
}
.bigviewboxs:hover span {
  color: #ff9900; 
}
.small-images {
  width: 500px;
  height: 330px; 
  border-radius: 15px;
}
.left-images{
  width: 60px;
  height: 90px;
  float: left;
}
.leftboxs{
  width: 80px;
  margin-left: 15px;
  margin-top: 10px;
}
.rightboxs {
  margin-left: 90px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.bigviewboxs:hover img {
  filter: brightness(1.2); 
}
.image-contains{
  width: 500px;
  height: 120px;
  border-radius: 10px;
  background-color: rgb(70,70,70);
}
</style>
